<template>
    <div class="content">
        <div class="content-1-brief_introduction list-title">告别列表</div>
        <div class="infinite-list-wrapper" style="overflow: auto">
            <ul
                class="list"
            >
                <li 
                    v-for="(item, index) in listData" 
                    :key="index" 
                    class="list-item" 
                    
                >
                    逝者姓名：{{ item.of_ex2 }}
                    <span class="gb-text" @click="go(item, 1)">告别仪式</span>
                    <span class="gb-text" @click="go(item, 2)">生平展示</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { HAGBTXXApi } from '@/apis'
    import { useRoute, useRouter } from 'vue-router'
    import { useStore } from '@/store'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()

    const listData: Ref<any> = ref([])
    
    HAGBTXXApi({}).then(res => {
        listData.value = res
    })
    const go = (item: any, index: number) => {
        console.log(item)
        store.storeMsg = item
        if (index == 1) {
            router.push(`/controlModel?id=${item.of_id}`)
        } else if (index == 2) {
            router.push(`/showModel?id=${item.of_id}`)
        }
        
    }

</script>

<style lang="scss" scoped>
    .content::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/avatar/bg8.png');
        background-size: 100% 100%;
        filter: blur(5px);
    }
    .content {
        width: 100vw;
        height: 100vh;
        // background-image: url('@/assets/avatar/bg7.png');
        // background-size: 100% 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        color: #fff;
        box-sizing: border-box;
    }
    .list-title {
        font-size: 25px;
    }
    .content-1-brief_introduction {
        margin: 10px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        font-size: 25px;
        text-align: center;
        width: 30vw;
        height: 4vw;
        background-image: url('@/assets/img/backgroundFrame.png');
        background-size: 40% 100%;
        background-repeat: no-repeat;
        background-position: 50% 0;
    }
    .infinite-list-wrapper {
        flex: 1;
        // height: 300px;
        // height: 100vh;
        text-align: center;
    }
    .infinite-list-wrapper .list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .infinite-list-wrapper .list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 20px;
        // cursor: pointer;
    }
    .infinite-list-wrapper .list-item + .list-item {
        margin-top: 10px;
    }
    .gb-text {
        margin-left: 5vw;
        cursor: pointer;
        color: beige;
    }
</style>